<!--查看应聘者，米娜事，考核，录用-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>添加/编辑班级轮播</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <tips optionTemplate="classNewAdd"></tips>
        <div class="pic-box">
          <el-form label-width="100px" ref="editForm">
            <el-form-item label="班级：">
              <component
                  v-bind:is="item.propertyType"
                  :property.sync="item"
                  v-for="(item, index) in getPower"
                  :key="index"
                  @updateVal="updateVal"
              ></component>
            </el-form-item>
            <el-form-item label="展示类型：">
              <el-radio-group v-model="type">
                <el-radio :label="1">图片组</el-radio>
                <el-radio :label="2">视频</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="轮播图：">
              <el-upload
                  :action="$uploadImg"
                  list-type="picture-card"
                  :file-list="fileList"
                  :limit="100"
                  multiple
                  :on-success="handleSuccessImg"
                  :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="视频：">
              <div class="form-linebox-right">
                <el-upload
                    class="addicon"
                    :action="$uploadImg"
                    :show-file-list="false"
                    :file-list="videofileList"
                    accept=".mp4"
                    :limit="1"
                    :on-success="handlevideoSuccess"
                    :before-upload="beforevideoUpload"
                    :on-progress="handprogress"
                >
                  <div v-if="vedioOption!==''">
                    <video :src="vedioOption"
                           class="avatar"
                           style="background: #000"
                           controls="controls"
                    >您的浏览器不支持视频播放
                    </video>
                    <span class="detelBox" @click.stop="handlevideoRemove">删除</span>
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div
                      slot="tip"
                      class="el-upload__tip"
                  >最多上传一个（仅支持50M以内）
                  </div>
                </el-upload>
                <el-progress :percentage="percentage" v-show="percentageStatus"></el-progress>
              </div>
            </el-form-item>
          </el-form>
          <div class="unback-pic">
            <div>预览</div>
            <div class="unback-box">
              <div class="unback-pic-line">
                <img src="@/assets/imageAdmin/classbg.png" alt="">
              </div>
              <div class="swiper-box" v-if="type==1">
                <el-carousel height="198px">
                  <el-carousel-item v-for="(item,index) in uploadPic" :key="index">
                    <div class="swiper-list"
                         :style="{background: 'url('+item.pic+')',backgroundRepeat: 'no-repeat',backgroundSize:'cover'}"></div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="swiper-box" v-if="type==2">
                <video loop class="desc-line" ref="videoPlayer" autoplay id="videoPlayer" style="height: 198px">
                  <source :src="imghttp+vedioOption" type="video/mp4"/>
                  Your browser does not support the video tag.
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
        <el-button type="primary" @click="saveForm()" size="small">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  // OperationType 操作类型 InterviewReview 简历审核预约面试
  props: ['visible', 'imgId'], // resumeType show 只查看不操作 ; resumeId 简历id
  components: {},
  data() {
    return {
      fileList: [],
      uploadPic: [],
      dialogVisible: false,
      dataFrom: {
        class_id: '',
        section_id: ''
      },
      videofileList:[],
      type: 1,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      vedioOption: '',
      percentageStatus: false,
      percentage: 0
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (this.imgId) {
          this.getForm()
        }
      } else {
        this.fileList = [];
        this.uploadPic = [];
        this.dataFrom.class_id = '';
        this.dataFrom.section_id = '';
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText =  ''
        newGetPower['section_id'].child[0].valueText =  ''
        this.getPower = newGetPower
        this.type = 1
        this.vedioOption = ''
      }
    }
  },
  created() {
  },
  methods: {
    async saveForm() {
      console.log(this.dataFrom, this.uploadPic)
      if (!this.dataFrom.class_id) {
        this.$message.error('选择班级')
        return
      }

      if (this.type === 1 && !this.uploadPic.length) {
        this.$message.error('上传轮播图')
        return
      }
      if(this.type === 2 && !this.vedioOption){
        this.$message.error('上传视频')
        return
      }
      let pic_ = [];
      for (let item of this.uploadPic) {
        pic_.push(item.uploadPic)
      }
      let dataOption = {};
      dataOption.class_id = this.dataFrom.class_id;
      dataOption.pic = pic_.join(',');
      dataOption.type = this.type
      dataOption.video = this.vedioOption
      console.log('vedioOption:', dataOption)
      // let status = 1;
      // if(status){
      //   return
      // }
      if(this.imgId){
        dataOption.id =this.imgId;
      }
      let data = await this.$post(this.imgId ? this.api.classActive.class_pic.edit : this.api.classActive.class_pic.add, dataOption);
      if (!data.code) {
        this.$message.success(data.msg)
        this.$emit('InitFn')
        this.closePOpup()
      } else {
        this.$message.error(data.msg)
      }
    },
    async getForm() {
      let data = await this.$fetch(this.api.classActive.class_pic.edit, {id: this.imgId});
      if (!data.code) {
        let pic_ = data.vo.pic.split(',')
        for (let item of pic_) {
          // fileList: [],
          this.fileList.push({url: this.$BASE_URL + item})
          this.uploadPic.push({
            pic: this.$BASE_URL + item,
            uploadPic: item
          })
        }
        this.dataFrom.class_id = data.vo.class_id;
        this.dataFrom.section_id = data.vo.section_id;
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText =  data.vo.section_id
        newGetPower['section_id'].child[0].valueText =  data.vo.class_id
        this.getPower = newGetPower
        this.type = data.vo.type || 1
        this.vedioOption = data.vo.video
        console.log(this.getPower)
      } else {
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 更新值
    updateVal(option) {
      console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.dataFrom[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.dataFrom[option.select[i].name] = option.select[i].valueText
          } else {
            this.dataFrom[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      for(let i in this.uploadPic){
        if(this.uploadPic[i].pic === file.url){
          this.uploadPic.splice(i,1)
          return
        }
      }
    },
    handleSuccessImg(response) {
      console.log('response,', response)
      this.uploadPic.push({
        pic: this.$BASE_URL + response.data.name,
        uploadPic: response.data.name
      })
    },
    handlevideoSuccess(res, file) {
      if (res.code === 0) {
        this.vedioOption = res.data.name
        this.percentageStatus = false;
        this.percentage = 0;
      }
    },
    handlevideoRemove() {
      this.vedioOption = ''
      this.videofileList = []
    },
    beforevideoUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt50M) {
        this.$message.error('上传视频大小不能超过50MB哦!')
        return false
      }
      this.percentageStatus = true
    },
    handprogress(option) {
      this.percentage = parseInt(option.percent)
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 60%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.resumeBody {
  display: flex;
  border-style: solid solid none;
  border-width: 1px;
  border-color: #ddd;
  margin-bottom: 40px;
}

.resumeBody-left {
  flex: 1;
}

.resumeBody-left-line {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  /*height: 50px;*/
  /*line-height: 49px;*/
}

/*.resumeBody-left-line:last-child{*/
/*  border-bottom:none;*/
/*}*/
.resumeBody-left-line-title {
  width: 120px;
  background: #eee;
  text-align: center;
  height: 70px;
  line-height: 70px;
}

.resumeBody-left-line-box {
  flex: 1;
  padding-left: 20px;
  /*padding: 10px 0 10px 20px;*/
}

.resumeBody-right {
  height: 213px;
  display: block;
  background: #ddd;
}

.resumeBody-right img {
  height: 100% !important;
}


.order-edit-timeline-content {
  display: flex;
  padding: 30px 10px;
}


.order-title span {
  display: block;
  width: 4px;
  height: 18px;
  background: #3377ff;
  margin-right: 10px;
  border-radius: 2px;
}

.order-edit-timeline-content {
  display: flex;
}

.order-edit-timeline-list {
  flex: 1;
  font-size: 12px;
}

.list-content {
  display: flex;
  align-items: center;
  position: relative;
  height: 2px;
  margin-bottom: 20px;

}

.list-content .iconfont {
  position: absolute;
  background: #fff;
  left: 50%;
  top: 0;
  margin-left: -8px;
  margin-top: -7px;
  /*margin: -50% -50%;*/
  /*transform:translate(-50%,-50%);*/
  color: #c1c4cc;
}

.orderActive .iconfont {
  color: #3377ff;
  font-size: 18px;
  margin-top: -9px;
}

.list-content-left {
  flex: 1;
}

.list-content-right {
  flex: 1;
}

.border-not-arrived {
  border-bottom: 2px dashed #c1c4cc;
}

.border-arrived {
  border-bottom: 3px solid #dae3fe;
}

.title-content {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  color: #999;
}

.time-content p:nth-child(1) {
  color: #6396fb;
}

.time-content p {
  color: #555;
}

.time-content p span {
  cursor: pointer;
  color: #1b8de5;
  text-decoration: underline;
}

.time-content p em {
  font-style: normal;
}

.orderActive .title-content {
  color: #333;
}

.time-content {
  text-align: center;
}

.orderActive .time-content {
  color: #333;
}

.data-list-img img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.disier-box-timeline-list span:first-child {
  flex: 1;
}

.disier-box-timeline-list span:last-child {
  color: #3377ff;
  cursor: pointer;
}

/*end*/
/*.pulse {*/
/*  background: rgba(239, 45, 2, 0.6) !important;*/
/*  -webkit-animation: warn 0.9s ease-out;*/
/*  -moz-animation: warn 0.9s ease-out;*/
/*  animation: warn 0.9s ease-out;*/
/*  animation-iteration-count: 1;*/
/*  -webkit-animation-iteration-count: infinite;*/
/*  -moz-animation-iteration-count: infinite;*/
/*  animation-iteration-count: infinite;*/
/*  box-shadow: 1px 1px 30px #EF2D02;*/
/*}*/
/*.pulse, .pulse-big {*/
/*  position: absolute;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  border: 2px solid #EF2D02;*/
/*  background: rgba(239, 45, 2, 0.8);*/
/*  border-radius: 50%;*/
/*  z-index: 100;*/
/*  opacity: 0;*/
/*  top: -15px;*/
/*  left: -16px;*/
/*}*/
.pulse, .pulse-big {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid #37f;
  background: rgba(239, 45, 2, 0.8);
  border-radius: 50%;
  z-index: 9;
  opacity: 0;
  top: -16px;
  left: -16px;
}

.pulse {
  background: rgba(40, 118, 238, 0.6) !important;
  -webkit-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-box-shadow: 1px 1px 30px #EF2D02;
  box-shadow: 1px 1px 30px #37f;
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.check-paytype {
  margin-left: 5px;
  color: #6396fb;
  cursor: pointer;
}

.viewerImg {
  width: 50px;
  cursor: pointer;
}

.title-status {
  position: relative;
}

.title-status span {
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: 0;
  color: #6396fb;
  font-size: 14px;
  padding: 0 10px;
}

.pic-box {
  display: flex;
}

.el-form {
  flex: 1;
}

.unback-pic {
  width: 500px;
}

.unback-pic-line {
  width: 100%;
}

.unback-pic-line img {
  width: 100%;
}

.unback-box {
  position: relative;
  width: 500px;
}

.swiper-box {
  position: absolute;
  /*background: #fff;*/
  height: 198px;
  width: 486px;
  top: 23px;
  left: 7px;
}

.swiper-list {
  height: 198px;
  border-radius: 3px;
}
#videoPlayer{
  height: 673px;
  width: 100%;
  background: #0000008a;
}
</style>
<!--<div class="unback-box">-->
<!--<div class="unback-pic-line">-->
<!--  <img src="@/assets/imageAdmin/classbg.png" alt="">-->
<!--</div>-->
<!--<div class="swiper-box">-->

<!--</div>-->
<!--</div>-->

